<template>
	<view class="yuzhong">
		<view class="yuzhong_box">
			<view class="yuzhong_box_h2">
				<image src="https://9288rus.com.82.kssite.cn/uploads/20240417/71bf02cfaf8f7c14a2d561d75c713f53.png" mode=""></image>
				
				{{ $t("message.digndan") }} 
			</view>
			<view class="yuzhong_item">
				<view class="">
					{{ $t("message.ydh") }} ：{{order_data.number}}
				</view>
				<view class="">
					{{ $t("message.fhrq") }} ：{{order_data.delivery_date}}
					
				</view>
				<view class="">
					{{ $t("message.zt") }}：
					<text v-if="langs=='en'">
						{{order_data.status_ru}}
					</text>
					<text v-else>
						{{order_data.status_text}}
					</text>
				</view>
				<view class="">
					{{ $t("message.fjr") }} ：{{order_data.addresser}}
		
				</view>
				<view class="">
					{{ $t("message.zl") }}：{{order_data.weight}}
				</view>
				<view class="">
					{{ $t("message.tj") }}：{{order_data.volume}}
				</view>
				<view class="">
					{{ $t("message.pm") }}：{{order_data.product_name}}				
				</view>
				<view class="">
					{{ $t("message.tp") }}:
				<!-- 	<view class="item_image">
						<image v-for="(item,index) in arr" :key="index" :src="item" mode=""></image>
						<image style="height: 0;" mode=""></image>
					</view> -->
					<view style="margin-top: 20rpx;">
						
					</view>
					<u-album multipleSize='200' space='30' :urls="urls2"></u-album>
				</view>
				
			</view>
			
			
			<view class="wl_box">
				<view class="wl_box_h2">
					{{ $t("message.wlxx") }}:
				</view>
				<view class="wl_list">
					<view class="">
						<image src="http://9288rus.com.82.kssite.cn/uploads/20240417/73962188c2e033d8274d94aa0a62032e.png" mode=""></image>
						【{{ $t("message.mdck") }}】{{order_data.end_address}}
					</view>
					<view class="" v-for="(item,index) in order_type" :key="index" >
						<image :src="item.icon" mode=""></image>
						<view class="">
							{{item.datetime}}
						</view>
						{{item.message}}
					</view>
					<view class="">
						<image src="http://9288rus.com.82.kssite.cn/uploads/20240417/18af9a4bc207633c5013b4c9e53b2938.png" mode=""></image>
						【{{ $t("message.fjd") }}】{{order_data.start_address}}
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				order_data:{},
				arr:[],
				order_type:[],
				urls2: [],
				langs:''
			}
		},
		onLoad(even) {
			this.getde(even.id)
			if(uni.getStorageSync('lang')=='en'){
				uni.setNavigationBarTitle({
				    title: "Следы движения"
				});
				this.langs='en'
			}
		},
		methods: {
			getde(id){
				let _this=this
				uni.$u.http.post('/api/order/detail', {
				    id: id,
				}).then(res => {
					if(res.code==1){
						_this.arr=[]
						var arrs = []
						arrs = res.data.images.split(',') 
						arrs.forEach(red=>{
							_this.arr.push(_this.$IMG_URL + '' + red)
							_this.urls2.push(_this.$IMG_URL + '' + red)
						})
						res.data.logistics_information_json=JSON.parse(res.data.logistics_information_json)
						res.data.logistics_information_json.forEach(red=>{
							red.icon=_this.$IMG_URL + '' + red.icon
							_this.order_type.push(red)
						})
						_this.order_data=res.data
						
						
					}
				}).catch(err => {
				    
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.yuzhong{
		padding: 10rpx 20rpx 57rpx;
		min-height: 100vh;
		background: linear-gradient(0deg, #F9F9F9, #DCF0E3);
	}
	.yuzhong_box{
			background: #FFFFFF;
			box-shadow: 0px 2rpx 10rpx 0px rgba(0,0,0,0.06);
			border-radius: 20rpx;
			padding:  28rpx 20rpx	59rpx;
	}
	.yuzhong_box_h2{
		font-weight: 500;
		font-size: 36rpx;
		color: #01653B;
		display: flex;
		align-items: center;
		margin-bottom: 27rpx;
		image{
			width: 48rpx;
			height: 48rpx;
			margin-right:20rpx;
		}
	}
	.yuzhong_item>view{
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		padding: 40rpx 0 ;
		border-top: 2rpx solid #DFF1E6;
	}
	.yuzhong_item>view:last-of-type{
		border-bottom: 2rpx solid #DFF1E6;
	}
	// .item_image{
	// 	display: flex;
	// 	justify-content: space-between;
	// 	flex-wrap: wrap;
	// }
	.item_image  image{
		margin-top: 29rpx;
		width: 200rpx;
		height: 200rpx;
		background: #333333;
	}
	.wl_box{
		margin-top: 40rpx;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}
	.wl_box_h2{
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
		margin-bottom: 60rpx;
	}
	.wl_list{
		width: calc(100% - 20rpx);
		margin-left: 20rpx;
		border-left: 1rpx solid #C7EAD3;
		>view{
			position: relative;
			padding-bottom: 65rpx;
			padding-left: 39rpx;
		}
		>view:last-of-type{
			padding-bottom: 0;
		}
		image{
			position: absolute;
			left: -20rpx;
			top: 3rpx;
			width: 40rpx;
			height: 40rpx;
		}
	}
</style>
